<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Document</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/student.css">
  <link rel="stylesheet" href="css/iconfont.css">
</head>

<body>
  <div class="container">
    <header>
      <div class="header-title">
        <div class="header-return" id="toreturn">
          <i class="iconfont">&#xe600;</i>
        </div>
        <div> 毕业学员 </div>
      </div>
      <div class="secleted">
        <select id="salary">
          <option>薪资</option>
          <option>1k~5k</option>
          <option>5k~8k</option>
          <option>8k~11k</option>
          <option>11k~15k</option>
          <option>15k~25k</option>
        </select>
        <select id="age">
          <option>年龄</option>
          <option>16~18</option>
          <option>18~22</option>
          <option>22~26</option>
          <option>26~30</option>
          <option>30~35</option>
        </select>
      </div>
    </header>
    <section>
      <ul>

      </ul>
    </section>

  </div>
  <script src="./js/flexible.js"></script>
  <script src="./js/zepto.min.js"></script>
  <script src="./js/zepto.touch.js"></script>
  <script src="./js/lazyload.min.js"></script>
  <script>
    $(function () {
      // 返回上一页
      $('#toreturn').tap(function () {
        window.history.go(-1)
      })

      // 点击空白处，收起键盘
      window.addEventListener('touchstart', function () {
        document.activeElement.blur();
      }, false)

      var pages = 1;
      var sHtml = '';
      var parentId = '';
      //页面一加载调用请求数据的函数
      fAjax(pages, null, null, null, null);
      // 发送请求
      function fAjax(pages, minSalary, maxSalary, minAge, maxAge) {
        $.ajax({
          url: 'http://39.101.217.150:8075/jobs/list',
          data: {
            page: pages,
            size: 12,
            salary1: minSalary,
            salary2: maxSalary,
            age1: minAge,
            age2: maxAge
          },
          success: function (data) {
            var records = data.data.records;
            console.log(records);
            if (records.length) {
              $.each(records, function (index, item) {
                sHtml += `
                <li>
                  <div class="student-img">
                    <img data-original="${item.imgurl}" alt=""  src="./img/loading.jpg">
                  </div>
                  <div class="student-text">
                    <p>姓名：${item.name}</p>
                    <p>年龄：${item.age}</p>
                    <p>学历：${item.education}</p>
                    <p>城市：${item.city}</p>
                    <p>薪资：${item.salary}k</p>
                  </div>
                </li>
                `;
              })
              $('section ul').html(sHtml);
              $('section ul li img').lazyload({
                container: $('section')
              })
            }
          }
        })
      }

      // 筛选
      $('#salary,#age').change(function () {
        //得到最小和最大值
        var arr = $(this).val().split('~');
        minStr = parseInt(arr[0]);
        maxStr = parseInt(arr[1]);
        //得到对应的父元素
        parentId = $(this).attr('id');
        //重置page
        pages = 1;
        //重置sHtml
        sHtml = '';
        //点击的是薪资的筛选条件
        if (parentId == 'salary') {
          fAjax(pages, minStr, maxStr, null, null);
        } else {
          //点击的是年龄的筛选条件
          fAjax(pages, null, null, minStr, maxStr);
        }
      })



    })
  </script>
</body>

</html>